<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>成长值</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/iscroll-lite.js"></script>
    <style>

    </style>
</head>

<body ontouchstart class="page-bd-15">
    <div class="weui-panel weui-panel_access">
        <div class="weui-panel__hd">总成长值 <span style="color: #07C160;" id="total">9分</span> </div>
        <div id="growthlist"></div>
    </div>
    <div class="weui-loadmore" id="more" style="display: none;">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</body>

</html>

<script type="text/template" id="temp">
    {{each list}}
    <div class="weui-panel__bd" style="display:flex;align-items: center;">
        <div class="weui-media-box weui-media-box_text">
            {{if($value.OrderNo) }}
            <h4 class="weui-media-box__title">{{$value.TaskName}}({{$value.OrderNo}})</h4>
            {{else}}
            <h4 class="weui-media-box__title">{{$value.TaskName}}</h4>
            {{/if}}
            <p class="weui-media-box__desc">{{$value.RecordTime}}</p>
        </div>
        {{if($value.Value>0)}}
        <div style="flex:1;text-align:right;color: #07C160;">+{{$value.Value}}</div>
        {{else}}
        <div style="flex:1;text-align:right;color: #07C160;">{{$value.Value}}</div>
        {{/if}}
    </div>
    {{/each}}
</script>
<script>

    lobsterh5.main({
        data: {
            page: 1,
            limit: 10,
            hasemore: true
        },
        //初始化页面
        pageload: function () {
            this.initevent();
            this.getMemberInfo();
            this.getgrowthrecord();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $(window).scroll(
                self.debounce(
                    function () {
                        let pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
                        let viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
                        let scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                        if (pageHeight - viewportHeight - scrollHeight < 50) {
                            self.getgrowthrecord();
                        }
                    }), 1000);
        },
        debounce: function (fn, interval) {
            let timer = null; // 定时器
            return function () {
                // 清除上一次的定时器
                clearTimeout(timer);
                // 拿到当前的函数作用域
                let _this = this;
                // 拿到当前函数的参数数组
                let args = Array.prototype.slice.call(arguments, 0);
                // 开启倒计时定时器
                timer = setTimeout(function () {
                    // 通过apply传递当前函数this，以及参数
                    fn.apply(_this, args);
                    // 默认300ms执行
                }, interval || 300)
            }
        },
        getMemberInfo: function () {
            var self = this;
            if (!self.data.hasemore) return;
            $("#more").show();
            lobsterh5.GET("/lowcode/APP20210728143245471/member/?fun=member.getMemberInfo", {
                userId: localStorage.getItem("userId")
            }).then(res => {
                $("#total").text(res.basicInfo.GrowthValue + "分")
            }).catch(res => {
                $.toast(res.msg, 'forbidden');
            });
        },
        getgrowthrecord() {
            var self = this;
            if (!self.data.hasemore) return;
            $("#more").show();
            lobsterh5.GET("/lowcode/APP20210728143245471/member/?fun=member.getGrowthRecord", {
                page: self.data.page,
                limit: self.data.limit,
                userId: localStorage.getItem("userId")
            }).then(res => {
                var html = template("temp", { list: res, });
                $("#growthlist").append(html);
                if (res.length < self.data.limit) {
                    self.data.hasemore = false;
                    $("#more").text("没有更多了");
                } else {
                    $("#more").hide();
                    self.data.page++;
                }
            }).catch(res => {
                $.toast(res.msg, 'forbidden');
            });
        }
    });

</script>